<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>私 信</title>
    <div th:replace="commonPage::comLink"></div>
</head>
<body>
<div th:replace="commonPage::#loader"></div>
<div th:replace="commonPage::comIndexHeaderMune"></div>


<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 chat-list-padding">

    <div class="left-menu">
        <div class="chat-list invisible-scrollbar">
            <span style="line-height: 50px" class="background"> 会话列表 </span>
            <ul>
                <li th:id="${item.chatList.others}" th:each="item : ${chatLists}" class="chat-item">
                    <!--                    th:href="@{'/userCenter/communicate/'+${item.chatList.others}}"-->
                    <span th:onclick="chat([[${item.chatList.others}]])">
                        <img th:src="${item.others.imgUrl}" class="chat-img">
                        <span class="chat-user">
                            [[${item.chatList.others}]]
                        </span>
                    </span>
                    <span class="chat-time"
                          th:text="${#dates.format(item.chatList.lastReplyTime,'yyyy-MM-dd HH:mm')}">
                    </span>
                </li>
            </ul>
        </div>
    </div>
</div>


<!--     通知表单    -->


<section class="contact-area padding-top-140px padding-bottom-120px">

    <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="user-center"><a th:href="@{/userCenter}">个人中心</a></li>
        <li role="presentation" class="user-center"><a th:href="@{/userCenter/notices}">通 知</a></li>
        <li role="presentation" class="active"><a href="#">私 信</a></li>
    </ul>
    <span id="receiver_name" value=""></span>
    <div class="container">
        <div class="row">
            <div class="">
                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 mx-auto">
                    <div class="communicate-form">
                        <span id="noChat">您还未选中或者发起聊天，快去跟好友聊一聊吧！</span>
                        <div id="chat" class="reply-hidden">
                            <div id="chat_area" class="chat-show invisible-scrollbar ">

                                <!--                            遍历所有消息-->
                                <!--                            <div th:each="message : ${messages}">-->
                                <!--                                <br style="line-height: 60px">-->
                                <!--                                &lt;!&ndash;                             发消息              &ndash;&gt;-->
                                <!--                                                                <div th:id="${message.message.id}"-->
                                <!--                                                                     th:if="${session.loginUser} == ${message.sender}" class="msg-div">-->
                                <!--                                                                    <div class="sender">-->
                                <!--                                                                        <img th:src="${message.sender.imgUrl}" class="reply-img">-->
                                <!--                                                                        &lt;!&ndash;                                消息        &ndash;&gt;-->
                                <!--                                                                        <div class="content-msg" th:text="${message.message.content}"></div>-->
                                <!--                                                                    </div>-->
                                <!--                                                                </div>-->
                                <!--                                <div th:id="${message.message.id}" th:if="${session.loginUser} == ${message.receiver}"-->
                                <!--                                     class="msg-div">-->
                                <!--                                    <div class="receiver">-->
                                <!--                                        <img th:src="${message.sender.imgUrl}" class="reply-img" style="float: left">-->
                                <!--                                        <div class="content-msg" th:text="${message.message.content}"></div>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->
                                <!--                            </div>-->
                            </div>

                            <!--                        </div>th:action="@{'/communicate/'+${receiveUserName}-->
                            <div id="chat_form" class="padding-top-30px">
                                <textarea id="chat_content" name="chatContent" class="form-control"
                                  placeholder="给对方打个招呼吧！" cols="20" rows="8"></textarea>
                                <br>
                                <button type="submit" onclick="sendMsg()"  id="content_submit"
                                        class="btn btn-info btn-primary btn-right">提交
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div th:replace="commonPage::comFooter">
</div>
<div th:replace="commonPage::comScript">
</div>

<script>

    function sendMsg() {
        var chatContent =$("#chat_content");
        var receiverName = $("#receiver_name").attr("value");
        var content = chatContent.val();
        var chatArea = $("#chat_area");
        $.ajax({
            type: "post",
            url: "/chat/" + receiverName,
            data:{
                "content": content
            },
            async:false,
            dataType: "text",
            success:function (data) {
                chatContent.val('');
                var jsonData = JSON.stringify(data);
                var msg1 = jsonData.message;
                var msgContent = msg1.content;
                var sender1 = jsonData.sender;
                var msg_time = jsonData.gmtCreate;
                msg_time = new Date(msg_time).toLocaleString().replace(/:\d{1,2}$/, ' ');
                var imgUrl = sender1.imgUrl;
                var div_class = "sender";
                var img_class = "reply-img";
                var message = "<br style=\"line-height: 60px\">" +
                    "<p style='text-align: center'>"
                    + msg_time
                    + "</p>" +
                    "<div class=\"msg-div\">"
                    "<div class=" + div_class + ">" +
                    "<img src= "
                    + imgUrl +
                    "  class=" + img_class + ">" +
                    "<div class=\"content-msg\">"
                    + msgContent +
                    "</div>" +
                    "</div></div>";

                chatArea.append(message);

                chatArea.scrollTop(9999);
            },
            error:function (data) {
                data = JSON.stringify(data);
                alert("failed " + data);
            }
        })
    }

    function chat(name) {
        $("#chat_content").val("");
        $("#receiver_name").attr("value", name.toString());
        $(".chat-item").removeClass("background");
        $("#" + name).addClass("background");
        var others = name;
        var totol;
        var chatArea = $("#chat_area");
        var time = 0;
        $("#noChat").hide();
        $("#chat").css("display", "block");
        $.ajax({
            type: "get",
            url: "/userCenter/chat/" + others,
            dataType: "json",
            success: function (data) {

                chatArea.html("");

                data = JSON.stringify(data);
                var jsonData = JSON.parse(data);
                totol = jsonData.length;
                for (var i = 0; i < totol; i++) {
                    var msg = jsonData[i];
                    var sender = msg.sender.userName;
                    var imgUrl = msg.sender.imgUrl;
                    var content = msg.message.content;
                    var div_class;
                    var img_class;
                    var msg_time = msg.message.gmtCreate;
                    if (msg_time - time > 60000) {
                        time = msg_time;
                        msg_time = new Date(msg_time).toLocaleString().replace(/:\d{1,2}$/, ' ');
                    } else {
                        msg_time = "";
                    }
                    if (sender != others) {
                        //如果我是发送者
                        div_class = "sender";
                        img_class = "reply-img";
                    } else {
                        div_class = "receiver";
                        img_class = "receiver-img";
                    }
                    var message = "<br style=\"line-height: 60px\">" +
                        "<p style='text-align: center'>"
                        + msg_time
                        + "</p>" +
                        "<div class=\"msg-div\">" +
                        "<div class=" + div_class + ">" +
                        "<img src= "
                        + imgUrl +
                        "  class=" + img_class + ">" +
                        "<div class=\"content-msg\">"
                        + content +
                        "</div>" +
                        "</div></div>";
                    chatArea.append(message);
                    chatArea.scrollTop(9999);
                }
            },
            error: function () {
                alert("错误 ")
            }
        })
        setInterval(function () {
            var times = 0;
            $.ajax({
                type: "get",
                url: "/userCenter/chat/" + others,
                dataType: "json",
                success: function (data) {
                    data = JSON.stringify(data);
                    var times = 0;
                    var jsonData = JSON.parse(data);
                    var newTotal = jsonData.length;
                    if (newTotal == totol) {
                        console.log("无新消息");
                    } else {
                        chatArea.html("");
                        totol = newTotal;
                        for (var i = 0; i < totol; i++) {
                            var msg = jsonData[i];
                            var sender = msg.sender.userName;
                            var imgUrl = msg.sender.imgUrl;
                            var content = msg.message.content;
                            var div_class;
                            var img_class;
                            var msg_time = msg.message.gmtCreate;
                            if (msg_time - times > 60000) {
                                times = msg_time;
                                msg_time = new Date(msg_time).toLocaleString().replace(/:\d{1,2}$/, ' ');
                            } else {
                                msg_time = "";
                            }
                            if (sender != others) {
                                //如果我是发送者
                                div_class = "sender";
                                img_class = "reply-img";
                            } else {
                                div_class = "receiver";
                                img_class = "receiver-img";
                            }
                            console.log(img_class);
                            var message = "<br style=\"line-height: 60px\">" +
                                "<p style='text-align: center'>"
                                + msg_time
                                + "</p>" +
                                "<div class=\"msg-div\">" +
                                "<div class=" + div_class + ">" +
                                "<img src= "
                                + imgUrl +
                                "  class=" + img_class + ">" +
                                "<div class=\"content-msg\">"
                                + content +
                                "</div>" +
                                "</div></div>";
                            $("#chat_area").append(message);
                            $("#chat_area").scrollTop(9999);
                        }
                    }
                },
                error: function () {
                    alert("错误 ")
                }
            })
        }, 2000);
    }
</script>
</body>
</html>